<template>
	<div>
		<van-cell-group>
			<van-field
					v-model="login_form.username"
					required
					clearable
					label="用户名"
					right-icon="question-o"
					placeholder="请输入用户名"
					@click-right-icon="$toast('question')"></van-field>

			<van-field
					v-model="login_form.password"
					type="password"
					label="密码"
					placeholder="请输入密码"
					required></van-field>

			<van-button block="true" type="primary" @click="login" >登录</van-button>
		</van-cell-group>
	</div>
</template>

<script>
	import { API } from "@/libs/api";
	import { Button, Toast, Circle, Progress, CellGroup, Field, Dialog, List, Cell, Icon } from "vant";
	Vue.use(Progress).use(CellGroup).use(Button).use(Field).use(Icon);
	window.loginVue = {
		name: "login",
		components: { Button, Toast, Circle, Dialog, List, Cell, Icon },
		data() {
			return {
				login_form: {
					username: '',
					password: '',
				}
			};
		},
		methods: {
			login() {
				const that = this;
				API.login(this.login_form.username, this.login_form.password)
					.then(function (res) {
						if (res.status !== 200) {
							Toast(res.msg);
							return;
						}
						that.$ac.sendEvent({
							name: 'loginSuccess',
							extra: {
								username: that.login_form.username
							}
						});
					}).catch(function (err) {
						Dialog({
							title: '登录失败',
							message: JSON.stringify(err)
						})
					})
			},
		},
		mounted() {
		},
		created() {
		}
	};

	export default window.loginVue;
</script>

<style scoped>
</style>
